<!-- 融资查询 -->
<template>
	<view class="finance-box">
		<view class="finance-box-table">
			<view class="finance-box-thead">
				<view class="finance-box-th">申请机构</view>
				<view class="finance-box-th text-r">申请日期</view>
				<view class="finance-box-th">融资金额</view>
				<view class="finance-box-th text-r">融资状态</view>
			</view>
			<view class="finance-box-tr-box" v-for="tr in tableList" :key="tr.id">
				<view v-if="tr.status == '2'">
					<view class="finance-box-tr ">
						<view class="finance-box-td text-color-error">{{tr.bank}}</view>
						<view class="finance-box-td text-r text-color-error">{{tr.date}}
						</view>
						<view class="finance-box-td text-color-error">
							{{tr.money | unitConverter}}</view>
						<view class="finance-box-td text-r text-color-error" @tap="toDetail(tr)">
							<view 
							:class="tr.status=='0'?'text-color-info':tr.status=='2'?'text-color-error':'text-color-success'">{{valueToName(tr.status,statusList)}} <uni-icons
									type="right" size="12"></uni-icons> </view>
						</view>
					</view>
					<view class="text-r text-color-error-remark text-color-error">
						<text >{{tr.remark}}</text>
					</view>
				</view>
				<view v-else>
					<view class="finance-box-tr">
						<view class="finance-box-td" >{{tr.bank}}</view>
						<view class="finance-box-td text-r" >{{tr.date}}
						</view>
						<view class="finance-box-td" >
							{{tr.money | unitConverter}}</view>
						<view class="finance-box-td text-r" @tap="toDetail(tr)">
							<view 
							:class="tr.status=='0'?'text-color-info':tr.status=='2'?'text-color-error':'text-color-success'">{{valueToName(tr.status,statusList)}} <uni-icons
									type="right" size="12"></uni-icons> </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '002',
						bank: '邮储银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					},
					{
						id: '003',
						bank: '华润银行',
						date: '2022-01-01',
						money: 2000,
						status: '2',
						remark: '拒绝原因：资料上传不全不全'
					},
					{
						id: '004',
						bank: '中信银行',
						date: '2022-01-01',
						money: 2000,
						status: '3'
					},
					{
						id: '005',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '006',
						bank: '邮储银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					},
					{
						id: '007',
						bank: '华润银行',
						date: '2022-01-01',
						money: 2000,
						status: '2',
						remark: '拒绝原因：资料上传不全不全'
					},
					{
						id: '008',
						bank: '中信银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '009',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					},
					{
						id: '010',
						bank: '邮储银行',
						date: '2022-01-01',
						money: 2000,
						status: '3'
					}
				],
				statusList: [{
						id: '0',
						text: '申请中'
					},
					{
						id: '1',
						text: '审批中'
					},
					{
						id: '2',
						text: '审批拒绝'
					},
					{
						id: '3',
						text: '融资成功'
					}
				]
			}
		},
		methods: {
		
			valueToName(val, list = []) {
				let name = '';
				if (val && list.length) {
					for (let i = 0; i < list.length; i++) {
						if (list[i].id == val) {
							name = list[i].text
							return name;
						}
					}
				}
				return name
			},
			toDetail(item){
				 /* TODO ：跳转详情 */
				uni.navigateTo({
					url: '/pages/clt/financingDetails'
				});
			}
		}
	}
</script>

<style>
	.finance-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		padding: 24rpx 0;
		box-sizing: border-box;
	}

	.finance-box-table {
		margin:0 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 16rpx 110rpx;
		box-sizing: border-box;
	}

	.finance-box-thead {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.finance-box-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	.finance-box-tr-box:last-child {
		border: none;
	}

	.finance-box-tr {
		min-height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.finance-box-th {
		width: 25%;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.finance-box-td {
		width: 25%;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	
	.text-color-error-remark{
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #FF0000;
		text-align: right;
		font-weight: 400;
		margin-bottom: 23rpx;
	}
</style>